<template>
  <div class="common-layout">
    <el-container id="container">
      <el-header>
        <div id="logo">
          <el-image style="width: 75%;height: 75%;display: flex;margin: 0;padding: 0"
                    :src="imgPrefix+'squareLogo.jpg'" fit="scale-down"/>
          <el-text style="font-size: 15px;color: aliceblue">金粽子国际影城</el-text>
        </div>
        <div id="userHeader">
          <el-dropdown trigger="hover" size="large" type="primary">
            <el-avatar id="header" :size="60" :src="headerUrl" @error="errorHandler" style="display: flex;margin: auto"
                       fit="cover">
            </el-avatar>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-text id="displayName" style="font-size: 20px;margin: 0 auto;">{{ displayName }}</el-text>
                </el-dropdown-item>
                <el-dropdown-item divided @click="changeUserInfo">
                  <el-text style="font-size: 15px;margin: 0 auto;">
                    修改个人信息
                  </el-text>
                </el-dropdown-item>
                <el-dropdown-item @click="userOrders">
                  <el-text style="font-size: 15px;margin: 0 auto;">
                    查看订单
                  </el-text>
                </el-dropdown-item>
                <el-dropdown-item @click="userComments">
                  <el-text style="font-size: 15px;margin: 0 auto;">
                    查看评论
                  </el-text>
                </el-dropdown-item>
                <el-dropdown-item divided @click="logout">
                  <el-text style="font-size: 15px;margin: 0 auto;">
                    登出
                  </el-text>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
    </el-container>
  </div>
</template>
<script setup>
import SessionStorage from "@/SessionStorage.js";
import {ElNotification} from "element-plus";
import {useRouter} from "vue-router";
import {inject} from 'vue';

const loginUser = SessionStorage.getItem("loginUser")
const router = useRouter();
// 渲染头像
const displayName = loginUser.displayName;
const uPic = loginUser.uPic;
const imgPrefix = inject('imgPrefix');
const headerUrl = imgPrefix + uPic;
console.log("Header区域中，当前登录用户的头像是：" + headerUrl);
// 用户头像是否显示异常
const errorHandler = () => true;

const uidLocal = loginUser.uid;
const changeUserInfo = () => {
  router.push("/userInfo");
  console.log("查看用户信息的uid：" + uidLocal);
}
const userOrders = () => {
  router.push("/userOrders");
  console.log("查看用户订单的uid：" + uidLocal);
}
const userComments = () => {
  router.push("/userComments");
  console.log("查看用户评论的uid：" + uidLocal);
}
// 查询电影详情的路由push用查询参数传递mid；查看订单，评论，去买票
const logout = () => {
  SessionStorage.removeItem("loginUser");
  ElNotification({
    type: 'success',
    message: '退出登录成功！'
  })
  router.push("/login");
}
</script>
<style scoped>
.common-layout {
  height: 100%;
}

#container {
  height: 100%;
}

.el-header {
  display: flex;
  height: 106px;
  background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
  justify-content: space-between;
}

#logo .el-text {
  display: inline;
  width: 120px;
  height: 15px;
  position: absolute;
  left: 0;
  margin: 0 auto;
}


#searchAndHeader {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#searchMovie {
  margin: auto 100px;
}

#userHeader {
  display: flex;
}

.el-main {
  height: 70%;
}

#typeAndYearFilter {
  margin-left: 70px;
}

#movieType {
  display: flex;
  margin: 10px 10px;
}

#movieYear {
  display: flex;
  margin: 10px 10px;
}

#sortRadio {
  display: flex;
  margin-left: 90px;
  margin-top: 20px;
}

#movieCards {
  margin-top: 50px;
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
}

#movieCards .el-card {
  margin: 20px 30px;
}

.el-pagination {
  float: right;
}

.el-row {
  margin-top: 10px;
}
</style>